<template>
    <div class="custom-tree" style="min-height: 400px;">
      <b-tree-org
          ref="treeOrg"
          :data="data"
          horizontal
          :render="renderContent"
          :label-style="style" />
      <b-modal v-model="modal" title="自定义弹窗">
        <p>{{detail}}</p>
      </b-modal>
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          style: {
            display: 'flex',
            alignItems: 'center',
            cursor: 'default',
            padding: 0,
            minHeight: '44px',
            // border: '1px solid #eee',
            // boxShadow: 'none'
          },
          data: {
            id: '001',
            label: '郭小宁',
            icon: 'ios-person',
            sex: 'female',
            width: '200px',
            infoList: [
              { id: '001-001', label: '证件号码：320311********1230' },
              { id: '001-002', label: '完整度：50%' },
              { id: '001-003', label: '更新时间：2020-06-16 14:03' }
            ],
            infoShow: true,
            root: true,
            expand: true,
            children: [
              {
                id: '002',
                label: '基本信息',
                infoList: [
                  { id: '002-001', label: '证件号码：320311********1230' },
                  { id: '002-002', label: '完整度：50%' },
                  { id: '002-003', label: '更新时间：2020-06-16 14:03' }
                ],
                infoShow: true
              },
              {
                id: '003',
                label: '行政许可(2)',
                infoList: [
                  {
                    id: '003-001',
                    label: '<i class="iconfont icon-ios-information-circle-outline"></i>第1条 建筑施工特种作业人员操作资格考核',
                    style: { fontSize: '14px', paddingLeft: '20px', lineHeight: '32px' },
                    useHTML: true,
                    showDetail: true
                  },
                  {
                    id: '003-002',
                    label: '<i class="iconfont icon-ios-information-circle-outline"></i>第2条 建筑施工特种作业人员操作资格考核',
                    style: { fontSize: '14px', paddingLeft: '20px', lineHeight: '32px' },
                    useHTML: true,
                    showDetail: true
                  }
                ],
                infoShow: true,
                children: [
                  {
                    id: '003-001',
                    label: '清单名称：建筑操作资格考核1',
                  },
                  {
                    id: '003-002',
                    label: '清单名称：建筑操作资格考核2',
                  }
                ]
              },
              {
                id: '004',
                label: '行政处罚',
              }
            ]
          },
          detail: {},
          modal: false
        }
      },
      methods: {
        renderContent(h, { root, node, data }) {
          return h('demo-node', {
            props: {
              data,
              width: '380px'
            },
            on: {
              command: this.handleCommand
            }
          })
        },
        handleCommand(action, node, data) {
          console.log(node, action)
          this.detail = { action, ...node }
          this.modal = true
        },
        customClick(data) {
          console.log(data)
        }
      }
    }
  </script>